<template>
	<view class="container">
		<view class="empty_top">

		</view>

		<view class="ipt">
			<view class="account">
				<input type="number" value="" placeholder="请输入您的手机号码" placeholder-style="color: #b3b3b3" v-model="mobile" />
			</view>
			<view class="verify">
				<input type="number" value="" placeholder="请输入验证码" placeholder-style="color: #b3b3b3" v-model="code" />
				<button class="getVerify" @click.stop="getVerify" :disabled="isBtn" :class="{'btn2' : isBtn == true }">
					获取验证码 <text v-if="isBtn">({{timer}}s)</text>
				</button>
			</view>
			<view class="password">
				<input type="password" value="" placeholder="请输入您的密码" placeholder-style="color: #b3b3b3" v-model="password" />
			</view>
			<view class="password">
				<input type="password" value="" placeholder="请再次输入密码" placeholder-style="color: #b3b3b3" v-model="newpassword" />
			</view>

		</view>

		<view class="submit" @click="submit">
			<text>确认</text>
		</view>

	</view>
</template>

<script>
	import {
		getVerify,
		resetpwd
	} from '../../api/api.js'
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				password: '',
				newpassword: '',
				isBtn: false,
				timer: 60
			}
		},
		methods: {
			submit() {
				if (this.newpassword != this.password) {
					uni.showToast({
						icon: 'none',
						title: '请检查输入的密码是否相同'
					})
				} else {
					let data = {
						mobile: this.mobile,
						newpassword: this.newpassword,
						code: this.code
					}
					resetpwd(data).then(res => {
						console.log()
						if (res.code == 1) {
							uni.showToast({
								icon: 'success',
								title: '密码修改成功'
							})
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 500)
						}
					})

				}
			},
			getVerify() {
				let data = {
					mobile: this.mobile,
					event: 'resetpwd'
				}
				getVerify(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '获取验证码成功'
						})
						this.isBtn = true
						let timer1 = setInterval(() => {
							this.timer--;
							console.log(this.timer)
							if (this.timer == -1) {
								clearInterval(timer1);
								this.timer = 60;
								this.isBtn = false
							}
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.empty_top {
			height: 30upx;
		}

		.ipt {
			margin: 0 auto;

			.code,
			.account,
			.password,
			.verify {
				width: 90%;
				height: 90upx;
				margin: 0 5% 20upx;
				border: 1upx solid #e9e9e9;
				border-radius: 50upx;
				background-color: #FFFFFF;

				input {
					width: calc(100% - 30upx);
					height: 100%;
					margin-left: 30upx;
					// text-indent: 30upx;
				}
			}

			.verify {
				position: relative;

				input {
					min-width: calc(100% - 270upx);
					height: 100%;
					margin-left: 30upx;
					// text-indent: 30upx;
				}

				.getVerify {
					min-width: 200upx;
					height: 70upx;
					background-color: #3eb9ff;
					position: absolute;
					right: 30upx;
					top: 10upx;
					border-radius: 35upx;
					color: #fff;
					text-align: center;
					line-height: 70upx;
					font-size: 28upx;
				}

				.btn2 {
					background-color: #C0C0C0;
				}
			}
		}

		.submit {
			width: 90%;
			height: 90upx;
			margin: 30upx auto 10upx;
			background-color: #3eb9ff;
			border-radius: 50upx;
			color: #FFFFFF;
			line-height: 90upx;
			text-align: center;
		}


	}
</style>
